<template>
  <el-tabs class="xt-tabs">
    <el-tab-pane
      v-for="op in options"
      :key="op[alias.code]"
      :label="op[alias.name]"
      :name="op[alias.code]"
      v-bind="op"
    >
      <template #label v-if="'label' in $slots">
        <slot name="label" v-bind="{ ...op, code: op[alias.code], name: op[alias.name] }"></slot>
      </template>

      <template #default v-if="'default' in $slots">
        <slot v-bind="{ ...op, code: op[alias.code], name: op[alias.name] }"></slot>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
export default {
  name: "xt-tabs",
};
</script>

<script setup lang="ts">
import { AliasType, OptionType } from "@/typings";
interface PropType {
  [propName: string]: any;
  options: OptionType[];
  alias: AliasType;
}

withDefaults(defineProps<PropType>(), {
  options: () => [],
  alias: () => ({
    name: "name",
    code: "code",
  }),
});
</script>
